<!-- 用户管理页线框原型（新版本） -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理 - 线框图原型V2</title>
  <style>
    body { margin: 0; padding: 0; background: #f6f7fb; font-family: Arial, sans-serif; }
    .header { background: #fff; padding: 0 32px; height: 56px; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; }
    .breadcrumb { color: #888; font-size: 0.98rem; }
    .user-bar { margin-left: auto; display: flex; align-items: center; gap: 16px; }
    .main { margin: 32px 32px 0 252px; }
    .title-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .page-title { font-size: 1.4rem; font-weight: bold; color: #555; }
    .action-btns { display: flex; gap: 12px; }
    .btn { background: #409eff; color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 1rem; cursor: pointer; }
    .btn.secondary { background: #f56c6c; }
    .stats-row { display: flex; gap: 24px; margin-bottom: 24px; }
    .stat-card { flex: 1; background: linear-gradient(90deg,#6a9cfb 0%,#7f7fff 100%); color: #fff; border-radius: 18px; padding: 28px 32px; display: flex; align-items: center; gap: 18px; font-size: 1.2rem; font-weight: bold; position: relative; }
    .stat-card.pink { background: linear-gradient(90deg,#ff7eb3 0%,#ff758c 100%); }
    .stat-card.green { background: linear-gradient(90deg,#3ecf8e 0%,#6ee7b7 100%); }
    .stat-icon { font-size: 2.2rem; margin-right: 12px; opacity: 0.8; }
    .stat-label { font-size: 1.1rem; font-weight: normal; opacity: 0.9; }
    .filter-area { background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 18px 28px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
    .filter-row { display: flex; gap: 16px; align-items: center; }
    .filter-row input, .filter-row select { padding: 7px 14px; border: 1px solid #eee; border-radius: 6px; font-size: 1rem; }
    .filter-row .btn { padding: 7px 18px; }
    .filter-row .btn.secondary { background: #e4e7ed; color: #333; }
    .filter-row .status-group { margin-left: 24px; display: flex; gap: 8px; }
    .filter-row .status-btn { background: #f0f0f0; border: none; border-radius: 6px; padding: 6px 14px; font-size: 0.98rem; cursor: pointer; color: #666; }
    .filter-row .status-btn.active { background: #409eff; color: #fff; }
    .table-area { background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 18px 28px; }
    table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
    th, td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; text-align: left; }
    th { color: #888; font-weight: 600; background: #fafbfc; }
    tr:last-child td { border-bottom: none; }
    .table-actions { display: flex; gap: 8px; }
    .action-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; color: #409eff; font-size: 1.1rem; cursor: pointer; }
    .action-icon.view { background: #e6f7ff; }
    .action-icon.edit { background: #fffbe6; color: #faad14; }
    .action-icon.delete { background: #fff1f0; color: #f56c6c; }
  </style>
</head>
<body>
  <div class="header">
    <span class="breadcrumb">首页 / 用户管理</span>
    <div class="user-bar">
      <span>superadmin</span>
    </div>
  </div>
  <div class="main">
    <div class="title-bar">
      <span class="page-title">用户管理</span>
      <div class="action-btns">
        <button class="btn secondary">批量删除</button>
        <button class="btn">+ 新增用户</button>
      </div>
    </div>
    <div class="stats-row">
      <div class="stat-card"><span class="stat-icon">👤</span> 总用户数量 <span class="stat-label">总用户数</span></div>
      <div class="stat-card pink"><span class="stat-icon">✔️</span> 活跃用户数量 <span class="stat-label">活跃用户</span></div>
      <div class="stat-card green"><span class="stat-icon">📅</span> 新增用户数量 <span class="stat-label">今日新增</span></div>
    </div>
    <div class="filter-area">
      <div class="filter-row">
        <span style="color:#409eff;font-size:1.1rem;">🔍 用户筛选</span>
        <input type="text" placeholder="搜索用户名或邮箱">
        <select><option>选择角色</option></select>
        <button class="btn">搜索</button>
        <button class="btn secondary">重置</button>
        <div class="status-group">
          <button class="status-btn active">全部</button>
          <button class="status-btn">启用</button>
          <button class="status-btn">禁用</button>
        </div>
      </div>
    </div>
    <div class="table-area">
      <table>
        <thead>
          <tr>
            <th>用户信息</th>
            <th>昵称</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>状态</th>
            <th>登录次数</th>
            <th>最后登录</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr><td colspan="8" style="text-align:center;color:#bbb;font-size:1.3rem;">[ 用户注册信息占位 ]</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>
